<script setup lang="ts">
import { onMounted, onUnmounted, ref, watch } from 'vue'
import { init as initEChart, type ECharts, type EChartsOption, type SeriesOption } from 'echarts'
import {
  LengthInput,
  SpeedUnit,
  SpeedUnitSelect,
  fromMpsConvert,
  notify,
  speedUnitName
} from '@/widgets'
import BADAAircraftTypeSelect from './BADAAircraftTypeSelect.vue'
import { calcDragProfileById, type DragProfile } from './drag-tas'

const acType = ref<string>('A320')
const alt = ref<number>(3000)
const spdUnit = ref<SpeedUnit>(SpeedUnit.KT)

let dragProfile: DragProfile
function updateDragProfile() {
  dragProfile = calcDragProfileById(acType.value, alt.value)
}

const chartEl = ref<HTMLDivElement>()
let chart: ECharts

function updateChart(): void {
  if (!chart) {
    return
  }
  chart.clear()
  const opts: EChartsOption = {
    tooltip: {
      formatter: '{c}',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {},
    title: {
      text: `${acType.value} TAS-阻力`,
      subtext: `高度:\n${Math.floor(alt.value)}m\n质量:\n${dragProfile.mass}t\n翼面积:\n${
        dragProfile.S
      }[m3]\n大气模型:\nIAS\n空气密度:\n${dragProfile.rho.toFixed(3)}[kg/m3]`
    },
    backgroundColor: '#fff',
    xAxis: {
      name: `TAS(${speedUnitName(spdUnit.value)})`,
      type: 'value',
      min: 'dataMin'
    },
    yAxis: [
      {
        name: '系数',
        type: 'value'
      },
      {
        name: '阻力(N)',
        type: 'value'
      }
    ],
    series: makeSeries()
  }
  chart.setOption(opts)
}
function makeSeries(): SeriesOption[] {
  const fn = fromMpsConvert(spdUnit.value)
  return [
    {
      name: '阻力',
      type: 'line',
      // lineStyle: { width: 1 },
      yAxisIndex: 1,
      showSymbol: false,
      data: dragProfile.line.map((e) => [Math.floor(fn(e.TAS)), Math.floor(e.drag)])
    },
    {
      name: '升力系数',
      type: 'line',
      yAxisIndex: 0,
      lineStyle: { width: 1 },
      showSymbol: false,
      data: dragProfile.line.map((e) => [Math.floor(fn(e.TAS)), e.cL])
    },
    {
      name: '阻力系数',
      type: 'line',
      yAxisIndex: 0,
      lineStyle: { width: 1 },
      showSymbol: false,
      data: dragProfile.line.map((e) => [Math.floor(fn(e.TAS)), e.cD])
    }
  ]
}

function calc() {
  if (isNaN(alt.value)) {
    notify.error({ content: '请输入正确的高度数值' })
    return
  }
  updateDragProfile()
  updateChart()
}

watch(spdUnit, updateChart)

onMounted(() => {
  chart = initEChart(chartEl.value)
  updateDragProfile()
  updateChart()
})

onUnmounted(() => {
  chart?.dispose()
})
</script>
<template>
  <div class="bada-drag-calc pane-block">
    <div class="row">
      <div class="txt-box col-3em">机型</div>
      <BADAAircraftTypeSelect v-model="acType" />
      <div class="txt-box col-3em" style="margin-left: 2em">高度</div>
      <LengthInput v-model="alt" class="col-10em" />
      <button class="button is-primary" style="margin-left: 2em" @click="calc">计算</button>
      <div style="margin-left: 1.5em; width: 1.5em" class="border-left" />
      <div class="txt-box" style="margin-right: 1em">速度单位</div>
      <SpeedUnitSelect v-model="spdUnit" :options="[SpeedUnit.MPS, SpeedUnit.KMPH, SpeedUnit.KT]" />
    </div>
    <hr class="border-bottom" style="margin: 0.5em 0" />
    <div class="dtc-chart" ref="chartEl"></div>
  </div>
</template>
<style lang="scss">
.bada-drag-calc {
  .dtc-chart {
    width: 70em;
    height: 40em;
  }
}
</style>
